<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 登录账户设置页面 -->
          <el-tab-pane label="登录账户设置">
            <el-form
              ref="userData"
              label-width="120px"
              style="margin: 40px 0 0 100px"
              :model="userData"
              :rules="rules"
            >
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="userData.username" style="width: 300px" />
              </el-form-item>
              <el-form-item label="密码:" prop="password2">
                <el-input
                  v-model="userData.password2"
                  style="width: 300px"
                  type="password"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateUserData">更新</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 个人详情页面 -->
          <el-tab-pane label="个人详情">
            <component :is="userComponent" />
          </el-tab-pane>

          <!-- 岗位详情页面 -->
          <el-tab-pane label="岗位详情">
            <component :is="JobComponent" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { userInFormationApi, setEmployeeInformationApi } from '@/api'
import UserInfo from './components/user-info.vue'
import JobIofo from './components/job-info.vue'
export default {
  name: 'VueAdminTemplateMasterEmployeesPerson',
  components: {
    UserInfo,
    JobIofo
  },
  data() {
    return {
      userComponent: 'UserInfo', // 动态组件变量
      JobComponent: 'JobIofo',
      userData: {
        username: '', // 用户名称
        password2: '' // 用户密码  因为后端传来的 password 是加密过的字符串所以不能直接双向绑定修改
      },
      rules: {
        username: [
          {
            max: 4,
            min: 2,
            trigger: 'blur',
            message: '姓名位数为2~4位'
          },
          { required: true, trigger: 'blur', message: '姓名不能为空' }
        ],
        password2: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { trigger: 'blur', max: 16, min: 6, message: '密码在6~16之间' }
        ]
      }
    }
  },

  mounted() {},
  created() {
    this.userInFormation()
  },
  methods: {
    async userInFormation() {
      // 将获取过来的信息回显
      this.userData = await userInFormationApi(this.$route.params.id)
    },

    async updateUserData() {
      try {
        await this.$refs.userData.validate()
        // 对象中后面出现一样的属性后面的会将其覆盖 让用户输入的密码覆盖掉服务器传来的 密码
        await setEmployeeInformationApi({ ...this.userData, password: this.userData.password2 })
        this.$message.success('修改成功！')
      } catch (error) {
        this.$message.error('请输入要修改的值')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
